/**
 * 前端路由管理器
 * 支持哈希路由模式，提供页面切换、状态管理等功能
 */
class Router {
    constructor() {
        this.routes = new Map();
        this.currentRoute = '';
        this.currentComponent = null;
        this.isTransitioning = false;
        this.viewContainer = null;
        this.breadcrumbContainer = null;
        this.currentPageTitle = null;
        
        // 初始化DOM引用
        this.initDOM();
        
        // 绑定事件
        this.bindEvents();
    }
    
    /**
     * 初始化DOM引用
     */
    initDOM() {
        this.viewContainer = document.getElementById('app-view');
        this.breadcrumbContainer = document.getElementById('breadcrumb');
        this.currentPageTitle = document.getElementById('current-page');
    }
    
    /**
     * 绑定事件
     */
    bindEvents() {
        // 监听hashchange事件
        window.addEventListener('hashchange', () => {
            this.handleRoute();
        });
        
        // 监听浏览器前进后退
        window.addEventListener('popstate', (e) => {
            this.handleRoute();
        });
    }
    
    /**
     * 添加路由
     * @param {string} path - 路由路径
     * @param {object} config - 路由配置
     */
    addRoute(path, config) {
        this.routes.set(path, {
            title: config.title || '未知页面',
            component: config.component || 'default',
            onEnter: config.onEnter || null,
            onLeave: config.onLeave || null,
            requiresAuth: config.requiresAuth || false,
            ...config
        });
    }
    
    /**
     * 获取当前路由路径
     * @returns {string}
     */
    getCurrentPath() {
        const hash = window.location.hash;
        return hash ? hash.substring(1) : '/';
    }
    
    /**
     * 导航到指定路由
     * @param {string} path - 目标路径
     * @param {object} params - 路由参数
     */
    navigate(path, params = {}) {
        if (this.isTransitioning) {
            console.warn('页面切换中，请稍后...');
            return;
        }
        
        // 防止重复导航到当前页面
        if (path === this.currentRoute) {
            return;
        }
        
        // 更新URL
        const url = '#' + path;
        if (window.location.hash !== url) {
            window.location.hash = url;
        }
        
        // 处理路由
        this.handleRoute();
    }
    
    /**
     * 处理路由变化
     */
    handleRoute() {
        const path = this.getCurrentPath();
        const route = this.routes.get(path);
        
        if (!route) {
            console.warn(`未找到路由: ${path}`);
            this.show404();
            return;
        }
        
        // 执行路由切换
        this.switchRoute(path, route);
    }
    
    /**
     * 切换路由
     * @param {string} path - 路由路径
     * @param {object} route - 路由配置
     */
    async switchRoute(path, route) {
        if (this.isTransitioning) {
            return;
        }
        
        this.isTransitioning = true;
        
        try {
            // 执行离开当前页面的回调
            if (this.currentRoute && this.routes.get(this.currentRoute)?.onLeave) {
                await this.routes.get(this.currentRoute).onLeave();
            }
            
            // 显示加载状态
        this.showLoading();
        
        // 更新状态管理器
        if (window.StateManager) {
            window.StateManager.setState('app.isLoading', true);
            window.StateManager.setState('app.currentRoute', path);
        }
            
            // 等待页面切换动画完成
            await this.performTransition();
            
            // 加载新页面
            await this.loadComponent(route);
            
            // 更新状态
            this.currentRoute = path;
            
            // 更新UI
            this.updateUI(route);
            
            // 执行进入新页面的回调
            if (route.onEnter) {
                await route.onEnter();
            }
            
            // 隐藏加载状态
            this.hideLoading();
            
            console.log(`路由切换完成: ${path}`);
            
        } catch (error) {
            console.error('路由切换失败:', error);
            this.showError('页面加载失败，请重试');
        } finally {
            this.isTransitioning = false;
        }
    }
    
    /**
     * 执行页面切换动画
     */
    async performTransition() {
        return new Promise((resolve) => {
            const container = this.viewContainer;
            
            // 添加离开动画
            container.classList.add('page-transition');
            container.classList.remove('page-entering');
            
            setTimeout(() => {
                // 清除旧内容
                container.innerHTML = '';
                
                // 添加退出动画类
                container.classList.add('page-exiting');
                
                setTimeout(() => {
                    // 移除退出动画，添加进入动画
                    container.classList.remove('page-exiting');
                    container.classList.add('page-entering');
                    
                    setTimeout(() => {
                        // 移除动画类
                        container.classList.remove('page-transition', 'page-entering');
                        resolve();
                    }, 300);
                }, 150);
            }, 50);
        });
    }
    
    /**
     * 加载组件
     * @param {object} route - 路由配置
     */
    async loadComponent(route) {
        const componentName = route.component;
        
        // 更新状态管理器
        if (window.StateManager) {
            window.StateManager.setState('app.isLoading', false);
            window.StateManager.setState('ui.loadingComponents', new Set([...window.StateManager.getState('ui.loadingComponents'), componentName]));
        }
        
        // 检查组件是否存在
        if (!window.ViewComponents || !window.ViewComponents[componentName]) {
            throw new Error(`组件不存在: ${componentName}`);
        }
        
        // 创建组件实例
        this.currentComponent = new window.ViewComponents[componentName](route);
        
        // 渲染组件
        const content = await this.currentComponent.render();
        
        // 更新视图容器
        this.viewContainer.innerHTML = content;
        
        // 添加内容动画
        this.viewContainer.classList.add('content-wrapper');
        
        // 执行组件初始化
        if (this.currentComponent.init) {
            await this.currentComponent.init();
        }
        
        // 更新状态管理器
        if (window.StateManager) {
            const loadingComponents = window.StateManager.getState('ui.loadingComponents');
            loadingComponents.delete(componentName);
            window.StateManager.setState('ui.loadingComponents', loadingComponents);
        }
    }
    
    /**
     * 更新UI状态
     * @param {object} route - 路由配置
     */
    updateUI(route) {
        // 更新页面标题
        document.title = `${route.title} - LayUI单页面应用`;
        
        // 更新面包屑
        this.updateBreadcrumb(route);
        
        // 更新导航激活状态
        this.updateNavigation(route);
    }
    
    /**
     * 更新面包屑导航
     * @param {object} route - 路由配置
     */
    updateBreadcrumb(route) {
        if (this.currentPageTitle) {
            this.currentPageTitle.textContent = route.title;
        }
    }
    
    /**
     * 更新导航激活状态
     * @param {object} route - 路由配置
     */
    updateNavigation(route) {
        // 移除所有激活状态
        document.querySelectorAll('.route-link').forEach(link => {
            link.classList.remove('active');
        });
        
        // 设置当前激活状态
        const currentPath = this.getCurrentPath();
        document.querySelectorAll(`[data-route="${currentPath}"]`).forEach(link => {
            link.classList.add('active');
        });
        
        // 更新侧边栏状态
        this.updateSidebar(route);
    }
    
    /**
     * 更新侧边栏状态
     * @param {object} route - 路由配置
     */
    updateSidebar(route) {
        // 移除所有layui-this类
        document.querySelectorAll('#side-nav .layui-nav-item').forEach(item => {
            item.classList.remove('layui-this');
        });
        
        // 设置当前激活项
        const currentPath = this.getCurrentPath();
        const activeLink = document.querySelector(`#side-nav [data-route="${currentPath}"]`);
        if (activeLink) {
            const parentItem = activeLink.closest('.layui-nav-item');
            if (parentItem) {
                parentItem.classList.add('layui-this');
                
                // 展开父级菜单
                const parentNav = activeLink.closest('.layui-nav-child');
                if (parentNav) {
                    const parentNavItem = parentNav.closest('.layui-nav-item');
                    if (parentNavItem) {
                        parentNavItem.classList.add('layui-nav-itemed');
                    }
                }
            }
        }
    }
    
    /**
     * 显示加载状态
     */
    showLoading() {
        const contentElement = document.getElementById('page-content');
        if (contentElement) {
            contentElement.innerHTML = '<div class="page-loading"><div style="text-align: center; padding: 50px;"><div class="loading-spinner"></div><p style="margin-top: 20px;">页面加载中...</p></div></div>';
            contentElement.classList.add('page-loading');
        }
    }
    
    /**
     * 隐藏加载状态
     */
    hideLoading() {
        const contentElement = document.getElementById('page-content');
        if (contentElement) {
            contentElement.classList.remove('page-loading');
        }
    }
    
    /**
     * 显示错误信息
     * @param {string} message - 错误消息
     */
    showError(message) {
        if (this.viewContainer) {
            this.viewContainer.innerHTML = `
                <div class="error-shake" style="text-align: center; padding: 50px;">
                    <i class="layui-icon layui-icon-close-fill" style="font-size: 48px; color: #ff5722;"></i>
                    <p style="margin-top: 20px; color: #ff5722;">${message}</p>
                    <button class="layui-btn layui-btn-primary" onclick="window.router.go('/')" style="margin-top: 20px;">
                        <i class="layui-icon layui-icon-home"></i> 返回首页
                    </button>
                </div>
            `;
        }
    }
    
    /**
     * 显示404页面
     */
    show404() {
        this.viewContainer.innerHTML = `
            <div style="text-align: center; padding: 50px;">
                <i class="layui-icon layui-icon-404" style="font-size: 120px; color: #ccc;"></i>
                <h1 style="margin-top: 20px; font-size: 36px; color: #666;">404</h1>
                <p style="margin-top: 10px; font-size: 16px; color: #999;">抱歉，您访问的页面不存在</p>
                <button class="layui-btn layui-btn-primary" onclick="window.router.navigate('/')" style="margin-top: 20px;">
                    <i class="layui-icon layui-icon-home"></i> 返回首页
                </button>
            </div>
        `;
        
        // 更新标题
        document.title = '页面不存在 - LayUI单页面应用';
        
        // 更新面包屑
        if (this.currentPageTitle) {
            this.currentPageTitle.textContent = '页面不存在';
        }
    }
    
    /**
     * 初始化路由系统
     */
    init() {
        // 处理初始路由
        this.handleRoute();
        
        console.log('路由系统初始化完成');
    }
    
    /**
     * 获取路由参数
     * @returns {object}
     */
    getParams() {
        const hash = window.location.hash;
        const [path, query] = hash.split('?');
        const params = {};
        
        if (query) {
            const pairs = query.split('&');
            pairs.forEach(pair => {
                const [key, value] = pair.split('=');
                params[decodeURIComponent(key)] = decodeURIComponent(value || '');
            });
        }
        
        return params;
    }
    
    /**
     * 构建查询字符串
     * @param {object} params - 参数对象
     * @returns {string}
     */
    buildQueryString(params) {
        const pairs = [];
        for (const [key, value] of Object.entries(params)) {
            if (value !== null && value !== undefined && value !== '') {
                pairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
            }
        }
        return pairs.length > 0 ? '?' + pairs.join('&') : '';
    }
    
    /**
     * 带参数的导航
     * @param {string} path - 路径
     * @param {object} params - 参数
     */
    navigateWithParams(path, params) {
        const queryString = this.buildQueryString(params);
        const fullPath = path + queryString;
        this.navigate(fullPath);
    }
    
    /**
     * 后退
     */
    back() {
        window.history.back();
    }
    
    /**
     * 前进
     */
    forward() {
        window.history.forward();
    }
    
    /**
     * 刷新当前页面
     */
    refresh() {
        this.handleRoute();
    }
}

// 将Router类挂载到全局作用域
window.Router = Router;